import React, {Component} from 'react';

class MyPureComponent extends React.PureComponent {
    /**
     * 纯组件的使用场景
     * 性能优化：
     *  当组件的 props 和 state 变化较少时，使用纯组件可以避免不必要的渲染。
     * 列表渲染：
     *  在渲染大型列表时，使用纯组件可以减少子组件的重复渲染。
     * 高阶组件：
     *  将纯组件与高阶组件结合，可以进一步优化复杂组件的性能
     */

    /**
     * 注意事项：
     * 浅比较的局限性：
     *  浅比较只能比较对象的第一层属性，如果 props 或 state 包含嵌套对象或数组，可能会导致意外的行为。
     * 不可变数据：
     *  使用纯组件时，应确保 props 和 state 是不可变的（immutable）。
     *  如果需要更新嵌套对象或数组，可以使用浅拷贝或不可变库（如 immer）。
     * 函数组件中的回调函数：
     *  如果函数组件的 props 包含回调函数，每次渲染时都会生成新的函数引用，导致浅比较失效。
     *  可以使用 useCallback 来缓存回调函数。
     */

    render() {
        console.log('MyPureComponent 渲染');
        return <div>{this.props.value}</div>;
    }
}

class App extends React.Component {
    /**
     * 类组件：React.PureComponent
     * React.PureComponent 是 React.Component 的子类，
     * 默认实现了 shouldComponentUpdate 方法，进行浅比较。
     * 原理：
     *  在 shouldComponentUpdate 生命周期方法中，自动对 props 和 state 进行浅比较。
     *  如果 props 和 state 没有变化，返回 false，阻止重新渲染。
     */
    state = {
        value: 10,
    };

    handleClick = () => {
        this.setState({value: 1}); // 相同的值，不会触发重新渲染
    };

    render() {
        return (
            <div>
                <MyPureComponent value={this.state.value}/>
                <button onClick={this.handleClick}>点击</button>
            </div>
        );
    }
}

export default App;
